<template>
    <div class="box">
        <div class="top">
            <div class="tou"></div>
            <ul>
                <li>
                    <router-link to="/">商品</router-link>
                </li>
                <li>
                    <router-link to="/dis">评价</router-link>
                </li>
                <li>
                    <router-link to="/stose">商家</router-link>
                </li>
            </ul>
        </div>
        <div class="cotent">
            <router-view></router-view>
        </div>
        <div class="footer" @click="chang"></div>
        <div class="mask" v-show="isShow">
            <div>
                <ul>
                    <li>购物车</li>
                    <li @click="chang">清空 </li>
                </ul>
                <div>
                   <p>黑米莲子粥 <span style="color:red;font-size:20px">￥10</span></p>
                </div>
                
            </div>
        </div>


    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
        }
    },
    methods: {
        chang() {
            this.isShow = !this.isShow;
        }
    }
}
</script>

<style scoped>
html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.top {
    position: fixed;
    width: 100vw;
    /* height: 10vh; */
    /* background-color: red; */
    /* position: fixed; */
    left: 0;
    top: 0;

}

.box {
    display: flex;
    flex-direction: column;
}

 ul {
    display: flex;
    height: 9.333vw;
    justify-content: space-around;
    /* background-color: #ccc; */
}

 ul>li {
    text-align: center;
    font-size: 3.733vw;
    line-height: 10.667vw;


}

.tou {
    height: 22.667vw;
    background-color: red;
    width: 100%;
    /* position: fixed; */
}

ul>li a {
    color: black;
    text-decoration: none;
}

li a.router-link-exact-active {
    color: red;
}

.content {
    flex: 1;
    overflow: auto;
    /* margin-top: 50vh; */
}

.footer {
    width: 100vw;
    height: 10vh;
    background-color: red;
    position: fixed;
    left: 0;
    bottom: 0;
    background: url(../img/footer.png);
    /* bottom: 0px; */

}

.top>ul {
    background-color: white;
}

.mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(7, 17, 27, 0.6);

}
.mask>div{
    /* padding: 3.2vw; */
background-color: white;
position: fixed;
bottom: 10vh;
width: 100vw;

}
.mask>div>div{
    padding: 3.2vw;
}
.mask>div>ul{
    background-color:#f3f5f7;

}
.mask>div>div>p{
    padding: 3.2vw 0;
    
    border-bottom: 1px solid grey;
    font-size: 3.467vw;
    line-height: 6.4vw;
}
</style>